<template>
<!-- 这是案例 -->
  <div id="case">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div class="title_swipe">
      <div class="full_img">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596000771596&di=8a0772fb8b5d353020f3c41f040b4698&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201702%2F24%2F084858ute2yve3epd3qvvp.jpg" alt="">
      </div>
      <div class="title_MunuText">
        <sideMunu></sideMunu>
      </div>
      <!-- <van-swipe :autoplay="5000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe> -->
    </div>
    <div class="middle_img">
      <div class="img_title">
        <van-cell title="案例" icon="records" />
        <p @click="screen">地区筛选<i class="icon icon-filter"></i></p>
      </div>
      <div class="title_swipe">
        <van-swipe :autoplay="5000" @change="onChange">
          <van-swipe-item v-for="(imgs, index) in imageList" :key="index">
            <a :href="imgs.shop_url"><img :src="url + imgs.big_img"/></a>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/{{imgLength}}
            </div>
          </template>
        </van-swipe>
      </div>
      <!-- <div class="lazy_img">
        <div class="img_text" v-for="(img, index) in imageList"  :key="index">
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><img  v-lazy="img"/></a>
        </div>
      </div> -->
      <van-action-sheet v-model="regionShow" >
        <van-area title="地区筛选" :area-list="areaList" :columns-num="3" @cancel='cancel' @confirm='confirm'/>
      </van-action-sheet>
    </div>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script>
import axios from "axios";
import sideMunu from "../../components/shopping/sideMenu";
export default {
  data () {
    return {
      current: 0, //轮播下标
      imgLength: '',  //轮播图片张数
      regionShow: false, //是否打开地区筛选操作面板
      areaList: {}, //地区数据
      url: "https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/",   //图片网址拼接
      // 头部轮播图
      // images: [
      //   'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596000673320&di=f7d3450009a48035171e7d1032fa86ea&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201708%2F16%2F013425jmbbbj5vvv1lmnn7.png.thumb.jpg',
      //   'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596000771596&di=8a0772fb8b5d353020f3c41f040b4698&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201702%2F24%2F084858ute2yve3epd3qvvp.jpg',
      // ],
      // 楼盘轮播
      imageList: [],
    }
  },
  components: {
    sideMunu
  },
  methods: {
    // 轮播图下标
    onChange(index) {
      this.current = index;
    },
    // 打开地区筛选操作面板
    screen() {
      var _this = this;
      _this.regionShow = true;
      _this.$get('estate/list').then((res)=>{
          if(res.code == 200){
            _this.areaList = res.data;
          }
      }).catch(()=>{
        console.log("数据异常")
      })
    },
    // 地区选择器取消
    cancel() {
      this.regionShow = false;
    },
    // 地区选择器确认
    confirm(data) {
      var _this = this;
      _this.regionShow = false;
      _this.$get(`estate/${data[2].code}`).then((res)=>{
          if(res.code == 200){
            _this.imageList = res.data;
            _this.imgLength = res.data.length;
          }
      }).catch(()=>{
        console.log("数据异常")
      })
    }
  },
  created () {
    var _this = this;
    _this.$get('estate/recommend').then((res)=>{
        if(res.code == 200){
          _this.imageList = res.data;
          _this.imgLength = res.data.length;
        }
    }).catch(()=>{
      console.log("数据异常");
    })
  }
}
</script>

<style lang="less" scoped>
/deep/ .swipe {
  overflow: hidden;
}
.van-swipe-item {
  font-size: 0px;
  transform: translate3d(0,0,0);
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/ .van-swipe__indicator {
  height: 8px;
  width: 8px;
  opacity: 0.5;
  background-color: #ccc;
}
/deep/ .van-swipe__indicator--active {
  background-color: white;
  opacity: 1;
}
.middle_img {
  font-size: 0px;
    p {
      font-size: 20px;
      margin-right: 10px;
    }
    .icon-filter {
      font-size: 25px;
      margin-left: 5px;
    }
}
.title_swipe {
  height: 100vh;
  position: relative;
  .van-swipe {
    height: 100%;
  }
  .full_img {
    height: 100%;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .title_MunuText {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2001;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
.img_title {
  font-size: 26px;
  display: flex;
  justify-content: space-between;
  margin: 50px 0px;
  .van-cell {
    width: 50%;
    padding: 0px 15px;
  }
  .van-cell__title {
    font-size: 22px;
  }
  .van-icon-records {
    font-size: 24px;
    color: red;
  }
}
.van-cell::after {
  border: 0px;
}
.img_text {
  position: relative;
}
.text_case {
  font-size: 20px;
  position: absolute;
  height: 100px;
  width: 100px;
  color: black;
  top: 20%;
  left: 30%;
}
// 轮播指示器
.custom-indicator {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>